// pages/category/index.js
import { request } from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 左侧菜单数据
    leftMenuList: [],
    // 右侧商品数据
    rightContent: [],
    //被点击的左侧菜单
    currentTndex: 0,
    //左侧内容滚动距离顶部
    scrollTop:0
  },
  // 接口返回数据
  Cates: [],
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    /*
    0.web和小程序的本地存储的区别：
        1.写代码方式不一样
           web:localStorage.setItem("key","value")  localStorage.getItem("key")
           wx:wx.setStorageSync('key', "value")  wx.getStorageSync("key");
        2.存的时候，有没有做类型转换
            web:不管存入的是什么类型的数据，最终都会先调用以下toString(),
                把数据变成了字符串再存入进去
            wx:不存在类型转换
    1.发请求前，先看一下本地存储中有没有旧的数据
    {time:Date.now(),data:[...]}
    2.没有旧的数据直接发请求
    3.有,同时没有过期就直接从本地中拿取
    */
    //1.获取本地存储的数据
    const Cates = wx.getStorageSync("cates");
    //2.判断是否存在(过期)
    if (!Cates) {
      this.getCates();
    } else {
      //定义过期时间 5分钟
      if (Date.now() - Cates.time > 1000 * 500) {
        this.getCates();
      } else {
        this.Cates=Cates.data
        let leftMenuList = this.Cates.map(data => data.cat_name);
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      }
    }
  },
  //获取商品分类数据
  async getCates() {
    // request({ url: "/categories" })
    //   .then(result => {
    //     this.Cates = result.data.message;
    //     //把接口的数据存储在本地存储中
    //     wx.setStorageSync('cates', { time: Date.now(), data: this.Cates })

    //     // console.log(this.Cates)
    //     //构造左侧菜单数据
    //     let leftMenuList = this.Cates.map(data => data.cat_name);
    //     //构造右侧商品数据
    //     let rightContent = this.Cates[0].children;
    //     this.setData({
    //       leftMenuList,
    //       rightContent
    //     })
    //   })
    //1.使用es7的async
    const res = await request({url:'/categories'})
    this.Cates = res;
        //把接口的数据存储在本地存储中
        wx.setStorageSync('cates', { time: Date.now(), data: this.Cates })

        // console.log(this.Cates)
        //构造左侧菜单数据
        let leftMenuList = this.Cates.map(data => data.cat_name);
        //构造右侧商品数据
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })

  },
  //左侧菜单的点击事件
  handleItemTap(e) {
    /*
    1.获取点击索引
    2.个体data中的currentIndex赋值
    3.根据不同索引来改变商品数据
    */
    const { index } = e.currentTarget.dataset;
    let rightContent = this.Cates[index].children;
    this.setData({
      currentTndex: index,
      rightContent,
      //从新设置右侧内容scroll-view标签距离顶部的距离
      scrollTop:0
    })

  }
})